---
import type { GetStaticPaths, Page } from 'astro'
import type { CollectionEntry } from 'astro:content'
import { POSTS_CONFIG } from '~/config'
import { getAllPosts } from '~/lib/data'
import Layout from '~/layouts/Layout.astro'
import Pagination from '~/components/base/Pagination.astro'
import List from '~/components/posts/card/List.astro'
import PageTitle from '~/components/base/PageTitle.astro'

export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
  const sortedPosts = await getAllPosts()

  return paginate(sortedPosts, {
    pageSize: POSTS_CONFIG.postPageConfig.size,
  })
}

interface Props {
  page: Page<CollectionEntry<'posts'>>
}

const { page } = Astro.props

const { title, description, introduce } = POSTS_CONFIG
---

<Layout {title} {description}>
  <div class="relative z-[1] py-8 pb-10 px-6 sm:px-8">
    <PageTitle {title} {introduce} />
    <div class="mt-12 fade-up">
      <List posts={page.data} type={POSTS_CONFIG.postPageConfig.type} coverLayout={POSTS_CONFIG.postPageConfig?.coverLayout} />
    </div>
    <Pagination {page} baseUrl="/posts" />
  </div>
</Layout>
